<div id="pan">
	<?php echo $html->link(__('Home',true), '/'); ?> &gt; 
	<strong><?php echo __('Web MML Composing Tool',true); ?></strong>
</div>

<h2 id="title"><?php echo __('Web MML Composing Tool',true); ?></h2>
<div dojoType="dijit.Toolbar" class="title_toolbar">
	<button dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconPlay" id="MmlPlay"><?php echo __('Play',true) ?></button>
	<button dojoType="dijit.form.Button" id="MmlStop" iconclass="LoreleiIcon LoreleiIconPlayerStop"><?php echo __('Stop',true) ?></button>
	<!--input type="radio" name="PlayType" value="midi" id="midi" dojoType="dijit.form.RadioButton" checked="checked" /><label for="midi">MIDI</label>
	<input type="radio" name="PlayType" value="jsmml" id="jsmml" dojoType="dijit.form.RadioButton" /><label for="jsmml">JSMML</label-->
	<button dojoType="dijit.form.Button" id="Clear" iconclass="LoreleiIcon LoreleiIconClear"><?php echo __('Clear',true) ?></button>
	<div dojoType="dijit.form.DropDownButton" iconclass="LoreleiIcon LoreleiIconMmlPaste">
		<span><?php echo __('Copy from Clipboard',true) ?></span>
		<div dojoType="dijit.TooltipDialog" id="Paste">
			<textarea name="mml" id="Mml" dojoType="dijit.form.SimpleTextarea" style="width:512px;height:48px;"></textarea>
			<p>
				<?php echo __('Please input the text of the MML form of Mabinogi into this form.',true);?> (MML@<i>[ch1]</i>,<i>[ch2],</i>,<i>[ch3]</i>;)<br />
				<?php echo __('If a lower paste button is pushed, it will divide into MML for every channel automatically.',true); ?>
			</p>
			<button id="MmlPaste" dojoType="dijit.form.Button"><?php echo __('Paste',true) ?></button>
			<button id="MmlClear" dojoType="dijit.form.Button"><?php echo __('Clear',true) ?></button>
		</div>
	</div>
	<button id="Copy" dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconMmlCopy"><?php echo __('Copy to Clipboard',true) ?></button>
</div>
<div id="composer-controler">
	<div id="composer-keyboard">
		<a id="c" ><span dojoType="dijit.Tooltip" position="below" connectId="c" ><?php echo __('C ',true); ?></span></a>
		<a id="cs"><span dojoType="dijit.Tooltip" position="above" connectId="cs"><?php echo __('C ',true); ?>&#9839;</span></a>
		<a id="d" ><span dojoType="dijit.Tooltip" position="below" connectId="d" ><?php echo __('D ',true); ?></span></a>
		<a id="ds"><span dojoType="dijit.Tooltip" position="above" connectId="ds"><?php echo __('D ',true); ?>&#9839;</span></a>
		<a id="e" ><span dojoType="dijit.Tooltip" position="below" connectId="e" ><?php echo __('E ',true); ?></span></a>
		<a id="f" ><span dojoType="dijit.Tooltip" position="below" connectId="f" ><?php echo __('F ',true); ?></span></a>
		<a id="fs"><span dojoType="dijit.Tooltip" position="above" connectId="fs"><?php echo __('F ',true); ?>&#9839;</span></a>
		<a id="g" ><span dojoType="dijit.Tooltip" position="below" connectId="g" ><?php echo __('G ',true); ?></span></a>
		<a id="gs"><span dojoType="dijit.Tooltip" position="above" connectId="gs"><?php echo __('G ',true); ?>&#9839;</span></a>
		<a id="a" ><span dojoType="dijit.Tooltip" position="below" connectId="a" ><?php echo __('A ',true); ?></span></a>
		<a id="as"><span dojoType="dijit.Tooltip" position="above" connectId="as"><?php echo __('A ',true); ?>&#9839;</span></a>
		<a id="b" ><span dojoType="dijit.Tooltip" position="below" connectId="b" ><?php echo __('B ',true); ?></span></a>
	</div>
	<div id="media"></div>

	<div id="composer-setup">
	<!-- *** Left Side *** -->
		<dl class="composer-setup-item" style="float:left;width:120px;">
			<dt><label for="tempo"><?php echo __('Tempo',true); ?></label></dt>
			<dd>
				<input type="text" id="tempo" type="text" value="120" maxlength="3" dojoType="dijit.form.NumberSpinner" constraints="{min:32,max:255,places:0}" style="width:64px;">
				<input type="button" id="ApplyTempo" class="icon" />
				<span dojoType="dijit.Tooltip" connectId="ApplyTempo" style="display:none;"><?php echo sprintf(__('Apply %s',true),__('Tempo',true)); ?></span>
			</dd>
			<dt><label for="octave"><?php echo __('Octave',true); ?></label></dt>
			<dd>
				<input type="text" id="octave" maxlength="1" value="4" dojoType="dijit.form.NumberSpinner" constraints="{min:1,max:8,places:0}" style="width:48px;" />
			</dd>
			<dt><label for="volume"><?php echo __('Volume',true); ?></label></dt>
			<dd>
				<input name="volume" id="volume" type="text" value="8" maxlength="2" dojoType="dijit.form.NumberSpinner" constraints="{min:0,max:15,places:0}" style="width:56px;">
				<input type="button" tabindex="0" class="icon" id="ApplyVolume" />
				<span dojoType="dijit.Tooltip" connectId="ApplyVolume" style="display:none;"><?php echo sprintf(__('Apply %s',true),__('Volume',true)); ?></span>
			</dd>
			<dt><label for="rank"><?php echo __('Rank',true); ?></label></dt>
			<dd><?php echo $form->select('rank_id',
					array($ranks),1,
					array(
						'dojoType'=>'dijit.form.FilteringSelect',
						'autocomplete'=>'false',
						'ignoreCase'=>'false',
						'hasDownAllow'=>'true',
						'style'=>'width:48px;',
						'searchAttr'=>'name',
						'disabled'=>'disabled'
					),
				false); ?>
			</dd>
		</dl>
	<!-- *** Right Side *** -->
		<dl>
			<dt><?php echo __('Note Length',true); ?></dt>
			<dd>
				<button class="icon NoteLength" id="note_1" ><span dojoType="dijit.Tooltip" connectId="note_1"  position="above" style="display:none;"><?php echo __('Whole note (Semibreve)',true); ?></span></button>
				<button class="icon NoteLength" id="note_2" ><span dojoType="dijit.Tooltip" connectId="note_2"  position="above" style="display:none;"><?php echo __('Half note (Minim)',true); ?></span></button>
				<button class="icon NoteLength" id="note_4" ><span dojoType="dijit.Tooltip" connectId="note_4"  position="above" style="display:none;"><?php echo __('Quater note (Crotchet)',true); ?></span></button>
				<button class="icon NoteLength" id="note_8" ><span dojoType="dijit.Tooltip" connectId="note_8"  position="above" style="display:none;"><?php echo __('8th note (Quaver)',true); ?></span></button>
				<button class="icon NoteLength" id="note_16"><span dojoType="dijit.Tooltip" connectId="note_16" position="above" style="display:none;"><?php echo __('16th note (Semiquaver)',true); ?></span></button>
				<button class="icon NoteLength" id="note_32"><span dojoType="dijit.Tooltip" connectId="note_32" position="above" style="display:none;"><?php echo __('32nd note (Demisemiquaver)',true); ?></span></button>
				<button class="icon NoteLength" id="note_64"><span dojoType="dijit.Tooltip" connectId="note_64" position="above" style="display:none;"><?php echo __('64th note (Hemidemisemiquaver)',true); ?></span></button>
			</dd>
			<dd>
				<button class="icon NoteLength" id="note_3" ><span dojoType="dijit.Tooltip" connectId="note_3"  position="below" style="display:none;"><?php echo __('3rd note (Triplet)',true); ?></span></button>
				<button class="icon NoteLength" id="note_6" ><span dojoType="dijit.Tooltip" connectId="note_6"  position="below" style="display:none;"><?php echo __('6th note (Half triplet)',true); ?></span></button>
				<button class="icon NoteLength" id="note_12"><span dojoType="dijit.Tooltip" connectId="note_12" position="below" style="display:none;"><?php echo __('12nd note (Quater triplet)',true); ?></span></button>
				<button class="icon NoteLength" id="note_24"><span dojoType="dijit.Tooltip" connectId="note_24" position="below" style="display:none;"><?php echo __('24th note (16th Triplet)',true); ?></span></button>
				<button class="icon" id="tie"><span dojoType="dijit.Tooltip" connectId="tie" position="below" style="display:none;"><?php echo __('Tie',true); ?></span></button>
				&nbsp;
				<input type="checkbox" dojoType="dijit.form.CheckBox" id="dotted"><label for="dotted"><?php echo __('Dotted',true); ?></label>
				<input type="hidden" value="4" name="length" id="length" />
			</dd>
			<dt><?php echo __('Rest',true); ?></dt>
			<dd>
				<button class="icon Rest" id="rest_1" ><span dojoType="dijit.Tooltip" connectId="rest_1" position="above" style="display:none;"><?php echo __('Whole rest',true); ?></span></button>
				<button class="icon Rest" id="rest_2" ><span dojoType="dijit.Tooltip" connectId="rest_2" position="above" style="display:none;"><?php echo __('Half rest',true); ?></span></button>
				<button class="icon Rest" id="rest_4" ><span dojoType="dijit.Tooltip" connectId="rest_4" position="above" style="display:none;"><?php echo __('Quater rest',true); ?></span></button>
				<button class="icon Rest" id="rest_8" ><span dojoType="dijit.Tooltip" connectId="rest_8" position="above" style="display:none;"><?php echo __('8th rest',true); ?></span></button>
				<button class="icon Rest" id="rest_16"><span dojoType="dijit.Tooltip" connectId="rest_16" position="above" style="display:none;"><?php echo __('16th rest',true); ?></span></button>
				<button class="icon Rest" id="rest_32"><span dojoType="dijit.Tooltip" connectId="rest_32" position="above" style="display:none;"><?php echo __('32nd rest',true); ?></span></button>
				<button class="icon Rest" id="rest_64"><span dojoType="dijit.Tooltip" connectId="rest_64" position="above" style="display:none;"><?php echo __('64th rest',true); ?></span></button>
			</dd>
			<dt><label for="inst"><?php echo __('Instrument',true); ?></label></dt>
			<dd><?php echo $form->select('instrument_id',
			array($instruments),0,
			array(
				'dojoType'=>'dijit.form.FilteringSelect',
				'autocomplete'=>'false',
				'ignoreCase'=>'false',
				'hasDownAllow'=>'true',
				'style'=>'width:100px',
				'id'=>'instrument'
			),
		false); ?>
				<input type="button" id="tone_checker" class="icon" />
			</dd>
		</dl>
	</div>
	<!-- MML Form -->
	<div id="composer-display">
		<div class="composer-display-item">
			<div class="composer-display-radio">
				<input type="radio" name="track" class="track" id="ch1_radio" dojoType="dijit.form.RadioButton" value="ch1" checked="checked" />
				<label for="ch1_radio"><?php echo __('Melody',true); ?></label>
			</div>
			<div class="composer-display-length">
				<label for="ch1_length"><?php echo __('Length',true); ?></label>
				<input id="ch1_length" disabled="disabled" type="text" value="0" dojoType="dijit.form.TextBox" />
			</div>
			<?php echo $form->textarea('ch1',array(
				'dojoType'=>'dijit.form.SimpleTextarea',
				'class'=>'mml',
				'warp'=>'soft',
				'id'=>'ch1'
			));?>
		</div>
		<div class="composer-display-item">
			<div class="composer-display-radio">
				<input type="radio" name="track" class="track" id="ch2_radio" dojoType="dijit.form.RadioButton" value="ch2" />
				<label for="ch2_radio"><?php echo __('Chord 1',true); ?></label>
			</div>
			<div class="composer-display-length">
				<label for="ch2_length"><?php echo __('Length',true); ?></label>
				<input id="ch2_length" disabled="disabled" type="text" value="0" dojoType="dijit.form.TextBox" />
			</div>
			<?php echo $form->textarea('ch2',array(
				'dojoType'=>'dijit.form.SimpleTextarea',
				'class'=>'mml',
				'warp'=>'soft',
				'id'=>'ch2'
			));?>
		</div>
		<div class="composer-display-item">
			<div class="composer-display-radio">
				<input type="radio" name="track" class="track" id="ch3_radio" dojoType="dijit.form.RadioButton" value="ch3" />
				<label for="ch3_radio"><?php echo __('Chord 2',true); ?></label>
			</div>
			<div class="composer-display-length">
				<label for="ch3_length"><?php echo __('Length',true); ?></label>
				<input id="ch3_length" disabled="disabled" type="text" value="0" dojoType="dijit.form.TextBox" />
			</div>
			<?php echo $form->textarea('ch3',array(
				'dojoType'=>'dijit.form.SimpleTextarea',
				'class'=>'mml',
				'warp'=>'soft',
				'id'=>'ch3'
			));?>
		</div>
	</div>
</div>

<p style="clear:both;text-align:center;"><?php echo __('* The button "Back" and the button "Forword" of a browser are each treated as "Undo" and "Redo".',true); ?></p>
<hr />

<div class="info">
	<?php 
		echo $html->link(__('Parmalink',true), array('controller'=>'mmls','action'=>'composer'), array('id'=>'permalink')); 
	?>
</div>

<ul id="help">
	<li dojoType="dijit.Tooltip" connectId="tempo" position="below"><?php echo sprintf(__('The value of %1$s can be specified among %2$s to %3$s.', true), __('Tempo',true),'32','255'); ?><br /><?php echo sprintf(__('A default value is %s.', true),'120'); ?><br /><?php echo sprintf(__('A click of right %s button will input a command into the specified channel.',true),$html->image('/img/icons/16x16/key_enter.png', array('alt'=> __('Apply', true), 'border'=>'0')));?></li>
	<li dojoType="dijit.Tooltip" connectId="octave" position="below"><?php echo sprintf(__('The value of %1$s can be specified among %2$s to %3$s.', true), __('Octave',true),'1','9'); ?><br /><?php echo sprintf(__('A default value is %s.', true),'4'); ?><br /><?php echo __('However, the ranges of the scale which can be performed by a musical instrument differ.',true); ?><br /><?php echo __('In addition, a scale is ignored in a percussion instrument.',true); ?></li>
	<li dojoType="dijit.Tooltip" connectId="volume" position="below"><?php echo sprintf(__('The value of %1$s can be specified among %2$s to %3$s.', true), __('Volume',true),'0','15'); ?><br /><?php echo sprintf(__('A default value is %s.', true),'4'); ?><br /><?php echo sprintf(__('A click of right %s button will input a command into the specified channel.',true),$html->image('/img/icons/16x16/key_enter.png', array('alt'=> __('Apply', true), 'border'=>'0')));?></li>
	<li dojoType="dijit.Tooltip" connectId="rank" position="below"><?php echo __('According to the length of inputted MML, the skill rank which can write music is displayed automatically.',true);?><br /><?php echo __('In mabinogi, it is mounted only to 7 now.',true);?></li>
	<li dojoType="dijit.Tooltip" connectId="ch1" position="below"><?php echo sprintf(__('MML of a %s is inputted.',true),__('Melody',true)); ?><br /><?php echo sprintf(__('It can input to %d characters. However, the number of characters which can be play by the present Mabinogi is to %d characters.', true),'1200','900'); ?></li>
	<li dojoType="dijit.Tooltip" connectId="ch1_length"><?php echo sprintf(__('The number of characters of MML of a %s is displayed.',true),__('Melody',true)); ?></li>
	<li dojoType="dijit.Tooltip" connectId="ch2" position="below"><?php echo sprintf(__('MML of a %s is inputted.',true),__('Chord 1',true)); ?><br /><?php echo sprintf(__('It can input to %d characters. However, the number of characters which can be play by the present Mabinogi is to %d characters.', true),'800','400'); ?><br /><?php echo __('Notice: Even if it puts in a tempo command here, the technical specification of QuickTime is not reflected by Lolerei.',true); ?></li>
	<li dojoType="dijit.Tooltip" connectId="ch2_length"><?php echo sprintf(__('The number of characters of MML of a %s is displayed.',true),__('Chord 1',true)); ?></li>
	<li dojoType="dijit.Tooltip" connectId="ch3" position="below"><?php echo sprintf(__('MML of a %s is inputted.',true),__('Chord 2',true)); ?><br /><?php echo sprintf(__('It can input to %d characters. However, the number of characters which can be play by the present Mabinogi is to %d characters.', true),'500','200'); ?><br /><?php echo __('Notice: Even if it puts in a tempo command here, the technical specification of QuickTime is not reflected by Lolerei.',true); ?></li>
	<li dojoType="dijit.Tooltip" connectId="ch3_length"><?php echo sprintf(__('The number of characters of MML of a %s is displayed.',true),__('Chord 2',true)); ?></li>
	<li dojoType="dijit.Tooltip" connectId="instrument_id" position="above"><?php echo __('A musical instrument to play is chosen.',true);?><br /><?php echo sprintf(__('It can be checked whether it is a musical instrument which can be played by clicking on a right icon %s.',true),$html->image('icons/16x16/spellcheck.png', array('alt'=> __('Tone Check', true), 'border'=>'0')));?></li>
	<li dojoType="dijit.Tooltip" connectId="tone_checker" position="below"><?php echo __('It can be checked whether it is a musical instrument which can be normally played by clicking on this icon.',true); ?><br /></li>
</ul>

<h2>デモ</h2>
<div class="post">
<p>以下のMMLをコピーして、Copy from Clipboardから貼り付けてみてください。</p>
<p>出典元：ソーサリアン「ペンタウァI」<br /><span id="trippet" style="background-color:#CCFFCC;">３連符</span><span dojoType="dijit.Tooltip" connectId="trippet" style="display:none;">L12やL24命令を使っている。08/04/24のパッチより３連譜補正していなくても問題なく再生できるようになった。</span>だけで作ってあります。Lolereiでは、正常に再生できていることを確認ください。</p>
</div>
<div class="mml_post">
<pre class="mml" id="track">MML@
v9l64c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;c&amp;cv0
c2t144v15&lt;d6l12der6fr6grd4der6fr&gt;f&lt;grd4der&gt;&gt;d24d+24n41rc&lt;&lt;grd4der&gt;b+&lt;f
r&gt;a&lt;gr&lt;g4gar6a+r&gt;&gt;e&lt;cr&lt;g4garn57a+r&gt;&gt;g&lt;cr&lt;g4gar6a+&gt;gn34ar&lt;g4garn62a+r6&gt;
c4d&amp;dder6fr6grd4der6fr&gt;f&lt;grd4der&gt;&gt;d24d+24n41rc&lt;&lt;grd4der&gt;b+&lt;fr&gt;a&lt;gr&lt;g4g
ar6a+r&gt;&gt;e&lt;cr&lt;g4garn57a+r&gt;&gt;a+&lt;cr&lt;g4gar6a+&gt;gn34ar&lt;g4gar6a+r6&gt;c4&gt;g2g6rl6e
f4g4d4e3g2gabl24&gt;cd&amp;d6&lt;b6a4b4ag+g2l6gr12ef4g4d4e3g2gab&gt;c24d24&amp;dc-e2l12
&amp;eo2a6abr6&gt;cr6l24fgab&lt;a4l12abr6&gt;cr6d6&lt;a4abr6&gt;cr6d6&lt;a4abr6&gt;c&gt;de&lt;d6&lt;a4ab
r6&gt;cr6d6&lt;a4abr6&gt;cr6d6&lt;a4abo5g6&lt;&lt;cr6d6&lt;a4abr6&gt;cr6d6
,
r1v15l2&gt;c.&amp;c6cl12rcdcd6c2rer3dr6&lt;br4ar6arg2&amp;gd6rgrb+r6a+r4gr3&gt;g2rg6de6
f4er3rd4rc2.&amp;c6c2rcdcd6c2rer3dr6&lt;br4ar6arg2&amp;gd6rgrb+r6a+r4gr3&gt;g2rg6der
f4er6dr6d4r&lt;d2l6&amp;dd2.r4d3d1.rd3d2&amp;dd2.r4d3d1.rd3g2.r4b&gt;cdedcc-3l12c&lt;ab
4&amp;b6a24g+24g2r4aa+b2&amp;bb&gt;cdba+rl6c-cdedcc-3l12c&lt;ab4&amp;b6l24ag+g1
,
r1v15f2.&amp;f6f2r12f6rf1f1e2.re2l12re6er6e1a+4ar6ar6a4rf2.&amp;f6f2rf6r4f1f1e
2.&amp;er6e2re6er6e1a+4ar6ar6a4rl1.&lt;g+r6g+3gr6g3g+r6g+3gr6d3&gt;b2.&lt;d6l24&gt;deg
1g1e2l12ef+gff+g1&gt;a1r24f+24g6f+r4f+rg6f+l24rg+a1
;</pre>
</div>

<?php 
$head->jsblock('dojo.require("dojo.parser");
dojo.require("dijit.Menu");
dojo.require("dijit.Dialog");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.CheckBox")
dojo.require("dijit.form.Slider");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dojox.form.DropDownSelect");
dojo.require("lorelei.mml.composer");
dojo.require("lorelei.mml.checker");
dojo.require("lorelei.mml.markup");
dijit.Tooltip.defaultPosition=\'below\';

message = {
	"tempo":"'. sprintf(__('The value of the %s is over the range of %d to %d.',true),__('Tempo',true),'32','255').'",
	"octave":"'.sprintf(__('The value of the %s is over the range of %d to %d.',true),__('Octave',true),'1','9').'",
	"volume":"'.sprintf(__('The value of the %s is over the range of %d to %d.',true),__('Volume',true),'0','15').'",
	"length":"'.sprintf(__('The value of the Note Length can use only the value which can be divided among %d.',true),'384').'",
	"clipboard":"'.__('Copying to clipboard by Mabinogi MML format.',true).'\n'.__('Note: Clipboard will be overwritten.',true).'\n\n'.__('Please use with the common sense.',true).'",
	"delete":"'.__('Are you sure to delete the contents in this form?',true).'",
	"unknown_format":"'.__('Unknown MML format.',true).'"
};
');
$head->meta(array('name'=>'description','content'=>__('Web MML Composing tool for Mabinogi.',true)));
$head->meta(array('name'=>'keyword','content'=>'MML,Mabinogi,compose,作曲ツール'));
echo $this->renderElement('HatenaStar');
 ?>